<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>棒棒糖</title>
		<style>
			.d1{
				width: 500px;
				height: 500px;
				/*背景颜色属性*/
				background-color: #e4393c; /* #000 */
				border-radius: 50%;
			}
			.d2{
				width: 350px;
				height: 350px;
				/*背景颜色属性*/
				background-color: #ffaa00; /* #000 */
				border-radius: 50%;
				/*相对定位：根据父级进行定位*/
				position: relative;
				left: 75px; /*?值*/
				top: 75px;
			}
			.d3{
				width: 200px;
				height: 200px;
				/*背景颜色属性*/
				background-color: #55ff00; /* #000 */
				/*画圆：1.空间 2.边框/背景颜色填充 3.倒角*/
				border-radius: 50%;
				position: relative;
				left: 75px; 
				top: 75px;
			}
			p{
				width: 20px;
				height: 300px;
				background-color: #00aaff;
				/*定位：相对定位*/
				position: relative;
			    left: 423px;
			    top: -76px;
				/* 高级属性：转换属性：旋转、缩放、平移 */
			    transform: rotate(-45deg);
				/*倒角*/
				border-radius: 5px;
			}
			/*微笑表情：边框 倒角 旋转*/
			.d4{
				width: 200px;
				height: 200px;
				border-top: 10px solid red;
				border-left: 10px solid red;
				border-radius: 50%;
				transform: rotate(228deg);
			}
		</style>
	</head>
	<body>
		<!-- 思路：html  4个元素  嵌套
		     1.设置嵌套3个div
			 2.设置1个p
			      css 
			选择器：抓取页面元素  ②类选择器，任何元素通用属性class="别名"
			                          css样式：.别名，抓取元素添加效果【样式】  
		-->
        <div class="d1">
        	<div class="d2">
        		<div class="d3"></div>
        	</div>
        </div>
		<p></p>
		<!-- 微笑表情 -->
		<div class="d4"></div>
		
		
		
	</body>
</html>